<template>
  <!--  <s-layout class="chat-wrap" title="推广中心" backgroundColor="#212124" navbar="inner" :is_main-body="true"-->
  <!--            color="#FFEBA3" :is_back="true"-->
  <!--            :customBody="customBody()">-->
  <view class="wh_750 pageHeight flex flex-column align-center"
        style="background: #FFEAC0;"
  >
    <s-header-title is-display-back
                    title="拾亲推广中心"
                    is-fixed
                    :title-color="`rgba(0, 0, 0,${page.showFlag})`"
                    :background="`rgba(255, 234, 192,${page.showFlag})`"
                    @getPageHeight="getPageHeight"
    ></s-header-title>
    <view :style="{height: page.headerHeight + 'px'}"></view>
    <view class="fs_42 fw_500 gradation">
      拾亲推广中心
    </view>
    <view class="wh_400 hW_40 flex align-center justify-center fs_24 fw_500 mt_15"
          style="border-radius: 25rpx;border: 2rpx solid #ff4206;color: #FF5800;"
    >
      可以积累就是多 不用重来就是快
    </view>
    <image :src="`${IMG_URL}/index/center_extension_bg.png`"
           class="wh_638 hW_453"
           style="margin-top: -15rpx"
    ></image>
    <view id="center" class="wh_710 hW_109 flex align-center justify-around bg_FFFFFF"
          style="border-radius: 16rpx"
    >
      <view class="flex flex-column" @click.stop="sheep.$router.go('/pages/pay/withdraw')">
        <view class="fs_18 fw_500" style="color: #9D7E5F">我的收入</view>
        <view class="flex align-center mt_15">
          <view class="fs_30 fw_500" style="color: #5A2718;">{{ userInfo.commission }}</view>
          <view class="wh_69 hW_26 flex align-center justify-center fs_18 color_FFFFFF fw_500 ml_26"
                style="border-radius: 7rpx;background: #ff7950"
          >
            提现
          </view>
        </view>
      </view>
      <view class="flex flex-column">
        <view class="fs_18 fw_500" style="color: #9D7E5F">邀请人数</view>
        <view class="flex align-center mt_15">
          <view class="fs_30 fw_500" style="color: #5A2718;">{{page.invite_vip}}/{{page.invite_total}}</view>
        </view>
      </view>
    </view>
    <view class="centerMain flex flex-column align-center ">
      <view class="main flex flex-column ">
        <view class="wh_548 flex align-center justify-between"
              style="margin: 42rpx auto 20rpx auto"
        >
          <view v-for="(item,index) in state.list"
                :key="index"
                class="wh_263 hW_68 flex align-center justify-center"
                style="border:2rpx solid #FF7950;border-radius: 40rpx"
                :style="{
                  background: index == state.current ? '#FF7950' : '#FFFFFF',
                  color: index == state.current ? '#FFFFFF' : '#FF7950'
                }"
                @click.stop="onChange({index})"
          >
            {{ item.name }}
          </view>
        </view>
        <!--        <swiper :style="{-->
        <!--                        height: `calc(100vh - ${layoutStyle.suTabsHeight + layoutStyle.statusHeight}px)`-->
        <!--                     }"-->
        <!--                :current="state.current"-->
        <!--                @change="swiperChange"-->
        <!--        >-->
        <view v-if="state.current == 0">
          <view class="w-100"
                :scroll-y="true"
                @scrolltolower="customerScroll"
          >
            <view v-for="(item,index) in state.userList" :key="index">
              <view :style="gridStyle()"></view>
              <s-block :styles="blockStyle()">
                <view class="all flex flex-row align-center">
                  <su-avatar :src="item.avatar.indexOf('http') != -1 ? item.avatar : `${nc_image}${item.avatar}`"
                             :imageStyle="avatarStyle(80,80)"
                             :avatarStyle="avatarStyle(80,80)"></su-avatar>
                  <view class="list flex flex-column" style="margin-left: 17rpx;">
                    <view class="flex flex-row">
                      <!--                        <view>{{ item.surname }}**</view>-->
                      <!--                        <view>{{ item.uid }}</view>-->
                      <view>{{ item.desc }}</view>
                    </view>
                    <view :style="gridStyle(11)"></view>
                    <view>
                      拾亲号: {{ item.uid }}
                    </view>
                    <view :style="gridStyle(7)"></view>
                    <view class="time">
                      绑定时间:
                      {{ page.options.level == 2 || page.options.level == 7 ? (!!item.parent_time ? dayjs(item.parent_time * 1000).format('YYYY-MM-DD HH:mm:ss') : '无') : (!!item.merchant_time ? dayjs(item.merchant_time * 1000).format('YYYY-MM-DD HH:mm:ss') : '无')
                      }}
                    </view>
                  </view>
                </view>
              </s-block>
            </view>
          </view>
        </view>
        <view v-else>
          <view class="w-100"
                :scroll-y="true"
                @scrolltolower="incomeScroll"
          >
            <view v-for="(item,index) in state.incomeList" :key="index" v-if="state.incomeList.length > 0">
              <view :style="gridStyle()"></view>
              <s-block :styles="blockStyle()">
                <view class="all flex flex-row align-center justify-between">
                  <view class="list flex flex-column" style="width: 520rpx;">
                    <view>
                      {{ item.des }}
                    </view>
                    <view :style="gridStyle(16)"></view>
                    <view class="time">
                      购买时间： {{ !!item.createtime ? item.createtime : '' }}
                    </view>
                  </view>
                  <view class="statistics flex flex-column align-end">
                    <view>
                      {{ !!item.amount ? (Number(item.amount) < 0 ? item.amount : `+${item.amount}`) : 0 }}
                    </view>
                    <view :style="gridStyle(5)"></view>
                    <view class="time">
                      {{ !!item.amount ? (Number(item.amount) < 0 ? '支出' : '收入') : '收入' }}
                    </view>
                  </view>
                </view>
              </s-block>
            </view>
          </view>
        </view>
        <!--        </swiper>-->
      </view>
    </view>
    <view class="hW_150"></view>
  </view>
  <!--  </s-layout>-->
</template>

<script setup>
  import SuTabs from '@/sheep/ui/su-tabs/su-tabs.vue';
  import { computed, getCurrentInstance, nextTick, onMounted, reactive } from 'vue';
  import { onLoad, onPageScroll, onReady, onPullDownRefresh } from '@dcloudio/uni-app';
  import SBlock from '@/sheep/components/s-block/s-block.vue';
  import SuAvatar from '@/sheep/ui/su-avatar/su-avatar.vue';
  import sheep from '@/sheep';
  import dayjs from 'dayjs';
  import SHeaderTitle from '@/sheep/components/s-header-title/s-header-title.vue';

  const { proxy } = getCurrentInstance();

  const state = reactive({
    list: [
      {
        name: '我的客户',
      }, {
        name: '我的收入',
      },
    ],
    current: 0,
    userList: [],
    incomeList: [],
  });
  // 我的客户传参
  const page = reactive({
    options: {},
    page: 1,
    pageSize: 20,
    count: 0,
    headerHeight: 0,
    topHead: 0,
    showFlag: 0,
  });
  // 我的收入传参
  const incomePage = reactive({
    options: {},
    page: 1,
    pageSize: 20,
    count: 0,
  });
  const layoutStyle = reactive({
    suTabsHeight: 0,
    statusHeight: sheep.$platform.navbar,
  });

  const nc_image = computed(() => sheep.$store('AI').nc_image);
  const IMG_URL = computed(() => sheep.$store('AI').sq_image_path);
  const userInfo = computed(() => sheep.$store('user').userInfo);

  const customBody = () => {
    return {
      'display': 'flex',
      'flex-direction': 'column',
      'align-items': 'center',
    };
  };
  const itemStyle = () => {
    return {
      'height': '80rpx',
      'line-height': '80rpx',
      'color': '#FEE4A3',
      'font-weight': '500',
      'font-size': '30rpx',
    };
  };
  const activeStyle = () => {
    return {
      'color': '#FEE4A3',
    };
  };
  const inactiveStyle = () => {
    return {
      'color': '#727272',
    };
  };
  const blockStyle = () => {
    return {
      borderRadiusTop: uni.upx2px(8),
      borderRadiusBottom: uni.upx2px(8),
      background: {
        type: 'color',
        bgColor: '#FFFFFF',
      },
    };
  };
  const gridStyle = (number = 10) => {
    return {
      height: uni.upx2px(number) + 'px',
    };
  };
  const avatarStyle = (width = 10, height = 10) => {
    return {
      width: width + 'rpx',
      height: height + 'rpx',
    };
  };

  onLoad((options) => {
    page.options = options;
    incomePage.options = options;
    getMyCustomerList();
    getMyIncomeList();
  });

  onReady(() => {
    nextTick(() => {
      const query = uni.createSelectorQuery().in(proxy);
      query.select('#center').boundingClientRect(info => {
        page.topHead = info.top;
      }).exec();
    });
  });

  onPageScroll((e) => {
    page.showFlag = e.scrollTop / page.topHead;
  });

  function getPageHeight(number) {
    page.headerHeight = number;
  }

  function onChange(info) {
    state.current = info.index;
  }

  function swiperChange(e) {
    state.current = e.detail.current;
  }

  // 获取我的客户列表
  async function getMyCustomerList() {
    const { data } = await sheep.$api.user.getAgentUsers({
      level: page.options.level,
      page: page.page,
      pageSize: page.pageSize,
    });
    data.list.forEach(item => {
      state.userList.push(item);
    });
    page.count = data.count;
    page.invite_total = data.invite_total
    page.invite_vip = data.invite_vip
  }

  // 获取更多客户信息
  async function customerScroll() {
    if (state.userList.length < page.count) {
      page.page++;
      await getMyCustomerList();
    }
  }

  // 获取我的收入列表
  async function getMyIncomeList() {
    const { data } = await sheep.$api.user.getAgentIncome({
      level: incomePage.options.level,
      page: incomePage.page,
      pageSize: incomePage.pageSize,
    });
    data.list.forEach(item => {
      state.incomeList.push(item);
    });
    incomePage.count = data.count;
  }

  // 获取更多我的收入
  async function incomeScroll() {
    if (state.incomeList.length < incomePage.count) {
      incomePage.page++;
      await getMyIncomeList();
    }
  }
</script>


<style lang="scss">
  .centerMain {
    width: 750rpx;
  }

  .main {
    width: 726rpx;
  }

  .suTabs {
    ::v-deep .u-tabs {
      background: transparent !important;
      border: none !important;
    }

    /* #ifdef H5 */
    background: transparent !important;
    border: none !important;
    /* #endif */
  }

  .all {
    margin: 12rpx 19rpx;
  }

  .list {
    font-family: Source Han Sans CN, Source Han Sans CN;
    font-weight: 500;
    font-size: 28rpx;
    color: #4E4E4E;
  }

  .time {
    font-family: Source Han Sans CN, Source Han Sans CN;
    font-weight: 500;
    font-size: 24rpx;
    color: #696969;
  }

  .statistics {
    font-family: Source Han Sans CN, Source Han Sans CN;
    font-weight: 500;
    font-size: 32rpx;
    color: #22DB00;
  }

  .gradation {
    font-weight: bold;
    /* 设置文字的背景色为渐变 */
    background: linear-gradient(180deg, #ff8748, #ff6c21, #FF5800, #FF4206);
    /* -webkit- 是为了兼容部分浏览器 */
    -webkit-background-clip: text;
    background-clip: text;
    /* 使文字颜色透明，只显示背景 */
    color: transparent;
  }
</style>
